<template>
  <div>
    <div class="subPhoto">
      <span>活动封面</span>
      <el-upload
        class="avatar-uploader"
        action="http://114.55.37.219:9090/files/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="checkMsg?.imgUrl != ''"
          :src="checkMsg.imgUrl"
          class="avatar"
        />
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="checkMsg"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="活动名称" prop="activeName">
        <el-input v-model="checkMsg.activeName" />
      </el-form-item>
      <el-form-item label="活动地点" prop="location">
        <el-input v-model="checkMsg.location" />
      </el-form-item>
      <el-form-item label="活动开始时间" prop="startTime">
        <el-input type="datetime-local" v-model="checkMsg.startTime"></el-input>
      </el-form-item>
      <el-form-item label="活动结束时间" prop="endTime">
        <el-input type="datetime-local" v-model="checkMsg.endTime"></el-input>
      </el-form-item>
      <el-form-item label="男生人数" prop="manNumber">
        <el-input type="text" v-model="checkMsg.manNumber"></el-input>
      </el-form-item>
      <el-form-item label="女生人数" prop="womanNumber">
        <el-input type="text" v-model="checkMsg.womanNumber"></el-input>
      </el-form-item>
      <el-form-item label="男生价格" prop="manMoney">
        <el-input type="text" v-model="checkMsg.manMoney"></el-input>
      </el-form-item>
      <el-form-item label="女生价格" prop="womanMoney">
        <el-input type="text" v-model="checkMsg.womanMoney"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="mobilePhone">
        <el-input type="text" v-model="checkMsg.mobilePhone"></el-input>
      </el-form-item>
      <el-form-item label="活动内容" prop="details">
        <textarea
          name=""
          id=""
          cols="60"
          rows="10"
          v-model="checkMsg.details"
        ></textarea>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { adminInfo } from "@/store/admin.js";
import { changeActive } from "@/require/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
let store = adminInfo();
let checkMsg = ref({});
const formSize = ref("default");
checkMsg.value = store.activeInfo;

// 上传图片成功回掉
const handleAvatarSuccess = (value) => {
  checkMsg.value.imgUrl = value;
};
// 提交表单
const submitForm = async () => {
  checkMsg.value.manNumber = Number(checkMsg.value.manNumber);
  checkMsg.value.womanNumber = Number(checkMsg.value.womanNumber);
  let { data } = await changeActive({
    ...checkMsg.value,
  });
  // console.log(data);
  if (data.code == "200") {
    router.push({
      name: "active",
    });
  }
};
</script>
<style scoped lang="less">
.subPhoto {
  margin-left: 53px;
  display: flex;
  height: 50px;
  align-items: center;
  margin-bottom: 10px;
  span {
    font-size: 14px;
    color: #606266;
  }
  .avatar-uploader {
    height: 100%;
    line-height: 100%;
    img {
      width: 80px;
      margin-left: 20px;
    }
    .avatar-uploader-icon {
      font-size: 40px;
      margin-left: 30px;
    }
  }
}
</style>